<template>
    <div>
        <el-form 
            :model="ruleForm" 
            :rules="rules2" 
            ref="ruleForm" 
            label-width="100px" 
            class="demo-ruleForm"
        >
            <el-form-item label="旧密码" prop="pass1" size="medium">
                <el-input type="password" autocomplete="off" v-model.number="ruleForm.pass1" placeholder="请输入旧密码">
                </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="pass2" size="medium">
            <el-input type="password" autocomplete="off" v-model.number="ruleForm.pass2" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确定密码" prop="pass3" size="medium">
            <el-input type="password" autocomplete="off" v-model.number="ruleForm.pass3" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="close">关闭</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { GetChangePwdApi } from '@/request/api'
export default {
    data () {
        var validatepass3 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.pass2) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
        // 修改密码
        ruleForm: {
            pass1: null,
            pass2: null,
            pass3: null,
        },
        rules2: {
            pass1: [
            {
                required: true, // 必填项
                message: "旧密码不能为空！", // 提示语
                trigger: "blur",
            },
            ],
            pass2: [
            {
                required: true, // 必填项
                message: "新密码不能为空！", // 提示语
                trigger: "blur",
            }
            ],
            pass3: [
            {
                required: true, // 必填项
                message: "确认密码不能为空！", // 提示语
                trigger: "blur",
            },
            { validator: validatepass3, trigger: "blur" },
            ],
        },
        }
    },
    methods:{
        
    // 修改密码
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(async (valid) => {
        console.log(this.ruleForm.pass1, this.ruleForm.pass2);
        if (valid) {
          // 校验通过，走这里的代码
          // 发起登录请求
          let res = await GetChangePwdApi({
            oldPassword: this.ruleForm.pass1,
            newPassword: this.ruleForm.pass3,
          });
          if (!res) return;
          console.log(res);
          // 提示操作成功
          this.$message({ message: "修改成功！", type: "success" });
        }
      });
    },
    close() {
        this.$router.push("/home");
        
    },
    }
}
</script>
 
<style lang = "less" scoped>
    
</style>